{% extends 'base.html' %}

{% block body %}


    <article>
        <ul class="article_ul">
            <li>
                <span class="article_icon iconfont icon-bingdu"></span>
                <P class="article_p">1233100</P>
                <h4>Active Cases</h4>
            </li>
            <li>
                <span class="article_icon iconfont icon-renqun"></span>
                <P class="article_p">182020</P>
                <h4>Recovered Cases</h4>
            </li>
            <li>
                <span class="article_icon iconfont icon-kulou"></span>
                <P class="article_p">71912</P>
                <h4>Total Deaths</h4>
            </li>
            <li>
                <span class="article_icon iconfont icon-dazhen"></span>
                <P class="article_p">11912</P>
                <h4>Vaccination</h4>
            </li>
        </ul>
    </article>

    <section>
        <div class="section_article">
            <span>About The Disease</span>
            <h3 class="section_h3">Coronavirus Disease Outbreak<br/> Situation</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod<br/>
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim<br/>
                veniam, quis nostrud ullamco laboris nisi ut ex ea.
            </p>
            <ul>
                <li><a class="section_a" href=""><span class="section_icon iconfont icon-duigou_kuai"></span>Avoid
                    touching your face.</a></li>
                <li><a class="section_a" href=""><span class="section_icon iconfont icon-duigou_kuai"></span>Cover your
                    mouth and nose when coughing.</a></li>
                <li><a class="section_a" href=""><span class="section_icon iconfont icon-duigou_kuai"></span>Stay home
                    if you feel unwell.</a></li>
            </ul>
        </div>
        <img src="/static/images/one.jpg" alt="" class="img_article">
        <img src="/static/images/two.jpg" alt="" class="img_aside">
    </section>

    <aside>
        <div class="aside_left">
            <h5>How To Protect Yourself?</h5>
            <h3 class="aside_h3">Prevention & advice</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br/>
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Fusce<br/>
                eget ex fermentum,ultricies nisi ac sed, lacinia est. Quisque ut lectus<br/>
                consequat, venenatis eros et, sed commodo risus.Nullam sit amet<br/>
                laoreet elit. Suspendisse non init magnaa velit efficitur.
            </p>
            <li><a href="">Read More</a></li>
        </div>
        <div class="aside_rigth">
            <li class="aside_rigth_li">
                <span class="iconfont icon-xishouye"></span>
                <a href="">Wash your hands</br>
                    frequently
                </a>
            </li>
            <li class="aside_rigth_li">
                <span class="iconfont icon-shejiao"></span>
                <a href="">Maintain social</br>
                    distancing
                </a>
            </li>
            <li class="aside_rigth_li">
                <span class="iconfont icon-face"></span>
                <a href="">Avoid touching on</br>
                    your face
                </a>
            </li>
            <li class="aside_rigth_li">
                <span class="iconfont icon-tiwenji"></span>
                <a href="">Practice respiratory</br>
                    hygiene
                </a>
            </li>
        </div>
    </aside>

    <nav>
        <h5 class="nav_h5">Protect Yourself?</h5>
        <h3 class="nav_h3">Take Steps To Protect Yourself</h3>
        <div class="nav_left nav_div">
            <img src="../s1.jpg" class="nav_img">
            <a href="">Wear A Face Mask</a>
            <p>Lorem ipsum dolor sit amet, consectetur</br>
                adipiscing elit, sed do eiusmod tempor</br>
                incididunt ut labore.
            </p>
        </div>
        <div class="nav_center nav_div">
            <img src="../s2.jpg" class="nav_img">
            <a href="">Wash Your Hands</a>
            <p>Lorem ipsum dolor sit amet, consectetur</br>
                adipiscing elit, sed do eiusmod tempor</br>
                incididunt ut labore.
            </p>
        </div>
        <div class="nav_rigth nav_div">
            <img src="../s3.jpg" class="nav_img">
            <a href="">Avoid Close Contact</a>
            <p>Lorem ipsum dolor sit amet, consectetur</br>
                adipiscing elit, sed do eiusmod tempor</br>
                incididunt ut labore.
            </p>
        </div>
    </nav>

    <div class="div_background_img">
        <div class="div_background_color">
            <h5 class="div_bgd_h5">Happy Clients</h5>
            <h3 class="div_bgd_h3">Reviews and Testimonials</h3>
            <span class="div_bgd_span iconfont icon-baojiaquotation"></span>
            <p class="div_bgd_p">Lorem ipsum dolor sit amet elit. Velit beatae laudantium voluptate rem</br>
                ullam dolore nisi voluptatibus esse quasi, doloribus tempora. Dolores</br>
                molestias adipisci dolo amet!. Lorem ipsum dolor sit amet consectetur</br>
                adipisicing elit. Esse architecto est ea sunt eligendi cum?</p>
            <div class="div_bgd_div">
                <img src="/static/images/team1.jpg" alt="">
                <div class="div_bgd_div_son">
                    <h3>John wilson</h3>
                    <p>Example City</p>
                </div>
            </div>
        </div>
    </div>

    <footer>

        {#		<h3>Subscribe to our Newsletter</h3>#}
        {#		<p>Lorem ipsum dolor sit amet elit. Velit beatae rem ullam dolore nisi esse quasi, sit</br>#}
        {#			amet. Lorem ipsum dolor sit amet elit.#}
        {#		</p>#}
        {#		<form action="">#}
        {#			<input type="text" placeholder="Your Email Address">#}
        {#			<button><span class="iconfont icon-paperPlane-fill"></span></button>#}
        {#		</form>#}
        <h5>Suggest Block</h5>

        <div class="later_page"><span class="page_later_id" onclick="later_page(this)" id="sub"><</span></div>
        <div class="suggest_out_all">
            {% for suggest in suggests %}
                <div class="suggest_out">
                    <div class="in_img"><img src="{{ suggest.profilePhoto }}" alt=""></div>
                    <p class="suggest_name">{{ suggest.name }}</p>
                    <p class="suggest_content">{{ suggest.content }}</p>
                </div>
            {% endfor %}
            <div class="next_page"><span class="page_next_id" onclick="next_page(this)" id="add">></span></div>
        </div>
    </footer>

    <div class="btm">
        <div class="btm_one">
            <h6>Our Info</h6>
            <ul>
                <li><a href="">About Us</a></li>
                <li><a href="">Blog Posts</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Team</a></li>
                <li><a href="">Contact us</a></li>
            </ul>
        </div>
        <div class="btm_two">
            <h6>Quick Link</h6>
            <ul>
                <li><a href="">Symptoms</a></li>
                <li><a href="">Prevention</a></li>
                <li><a href="">Protect Youself</a></li>
                <li><a href="">Our Doctors</a></li>
                <li><a href="">About Corona</a></li>
            </ul>
        </div>
        <div class="btm_three">
            <h6>Helpfull link</h6>
            <ul>
                <li><a href="">Terms of service</a></li>
                <li><a href="">Privacy policy</a></li>
                <li><a href="">Documentation</a></li>
                <li><a href="">Support</a></li>
                <li><a href="">Changelog</a></li>
            </ul>
        </div>
        <div class="btm_four">
            <h6>KOvid</h6>
            <ul>
                <li>
                    <p>Lorem ipsum dolor sit amet </br>
                        consectetur ipsum elit.</p>>
                </li>
                <li class="btm_icon iconfont iconfont icon-dizhi">
                    <p>Kovid, #2214 Honey street,</br>NY - 62617.</p>
                </li>
                <li class="btm_icon iconfont icon-24gf-telephone2"><a href="">88888</a></li>
                <li class="btm_icon iconfont icon-youxiang"><a href="">www@.com</a></li>
            </ul>
        </div>
    </div>
{% endblock %}
{% block footjs %}
    <script src="/static/js/jquery.min.js"></script>
    <script>
        function later_page(obj) {
            var page_id = obj.id.valueOf()
            if (page_id >= 2){
                page = parseInt(page_id)
                page -= 1
            }
            else{
                page = 1
            }
            $.ajax({
                url: '/index/',
                type: 'get',
                dataType: 'JSON',
                data: {'page': page},
                traditional: true,
                success(data) {
                    page = data['page']
                    {#alert(data['suggests'])#}
                    {#alert(data['page'])#}
                    var json = JSON.parse(data['suggests']);
                    $('.suggest_out').remove();
                    $.each(json, function (index, value) {
                        console.log(index);  //取出索引
                        var src = value['fields']['profilePhoto'];
                        {#alert(value['fields']['name']) // 取出每个元素#}
                        var comment_html = "<div class='suggest_out'>" +
                            "<div class='in_img'>" + "<img " + "src=" + src + ">" + "</div>" + "<p class='suggest_name'>" + value['fields']['name'] + "</p>" + "<p class='suggest_content'>" + value['fields']['content'] + "</p>"
                            {#"<p>" + value['fields']['name'] + "</p>"#}
                            + "</div>";
                        $('.suggest_out_all').before(comment_html);
                    })
                    $('.page_later_id').attr('id', data['page'])
                    $('.page_next_id').attr('id', data['page'])

                },
            });
        }

        function next_page(obj) {
            var page_id = obj.id.valueOf()
            if (page_id == 'add') {
                page = {{ page  }}
                if (page == {{ max_page }}) {

                } else {
                    page += 1;
                }
            }
            else if(page_id == {{ max_page }}) {
                page = page_id;
            }
            else {
                page += 1;
            }
            $.ajax({
                url: '/index/',
                type: 'get',
                dataType: 'JSON',
                data: {'page': page},
                traditional: true,
                success(data) {
                    page = data['page']
                    {#alert(data['suggests'])#}
                    {#alert(data['page'])#}
                    var json = JSON.parse(data['suggests']);
                    $('.suggest_out').remove();
                    $.each(json, function (index, value) {
                        console.log(index);  //取出索引
                        var src = value['fields']['profilePhoto'];
                        {#alert(value['fields']['name']) // 取出每个元素#}
                        var comment_html = "<div class='suggest_out'>" +
                            "<div class='in_img'>" + "<img " + "src=" + src + ">" + "</div>" + "<p class='suggest_name'>" + value['fields']['name'] + "</p>" + "<p class='suggest_content'>" + value['fields']['content'] + "</p>"
                            {#"<p>" + value['fields']['name'] + "</p>"#}
                            + "</div>";
                        $('.suggest_out_all').before(comment_html);
                    })
                    $('.page_later_id').attr('id', data['page'])
                    $('.page_next_id').attr('id', data['page'])

                },
                error(data) {
                }
            });
        }
    </script>
{% endblock %}